<template>
	<view>
		<loadstatusVue :status="data.loadStatus">
			<view class="contents">
				<view class="right_item" @click="$pageGo(`/mypage/usertabbar/templateInfo?id=${item.id}`)" v-for="(item, index) in data.list" :key="index">
					<view class="right_item_block">
						<view class="">
							<image :src="item.imgFace" mode="aspectFill" :lazy-load="true"></image>
						</view>
						<view class="right_cont">
							<view class="">
								<view class="title">{{ item.name }}</view>
								<view class="tip flex">
									<view class="t1">{{ item.type }}</view>
									<view class="t2" v-if="item.sign == '1'">签到</view>
									<view class="t2">{{ item.lineType == 1 ? '线上' : '线下' }}</view>
								</view>
							</view>
							<view class="">
								<view class="user flex"></view>
								<view class="tips flex">
									<view class="">创建时间：{{ item.createTime }}</view>
								</view>
								<view class="tips flex" v-if="item.verifyTime">
									<view class="">审核时间：{{ item.verifyTime }}</view>
								</view>
							</view>
						</view>
						<view class="zt" :class="`zt-${$formatStatus(item.verifyStatus)}`">
							{{ item.verifyStatus }}
						</view>
					</view>
					<view class="tss" v-if="item.verifyStatus == '已驳回'">驳回原因：{{ item.verifyDesc }}</view>
					<view class="bottom flex_jc_sb" @click.stop v-if="item.verifyStatus != '待审核'">
						<view class="switch-wrapper">
							<switch v-if="item.verifyStatus == '已通过'" :checked="item.online == '1' ? true : false" @change="switchChange(item, $event)" color="#D8C6A7">
								<view style="margin-left: 10rpx">{{ item.online == '1' ? '上架' : '下架' }}</view>
							</switch>
						</view>
						<view class="flex">
							<view class="btn" @click="handleEdit(item)" v-if="item.verifyStatus == '已驳回'">修改</view>
							<view class="btn" @click="handleRemove(item)">删除</view>
						</view>
					</view>
				</view>
			</view>
		</loadstatusVue>
		<view class="right_icon" @click="$pageGo('/mypage/usertabbar/createTemplateBefore')">
			<view class="icon flex_jc_cent">
				<view class="">
					<image src="/static/cj.png" mode=""></image>
					<view class="">创建</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { onShow, onUnload } from '@dcloudio/uni-app';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import { templateList, removeList, upTemplate } from '@/api/branch/template.js';
import { toast, showConfirm } from '@/utils/common.js';
const data = reactive({
	list: [],
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		pageNum: 1,
		pageSize: 10
	}
});
// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.rows);
		} else {
			data.list = res.rows || [];
		}
		// 判断是否有更多数据
		data.hasMore = res.rows && res.rows.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};
// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(300);
		}
		const res = await templateList(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(300);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};

const goInfo = () => {
	uni.navigateTo({
		url: '/mypage/usertabbar/templateInfo'
	});
};
// 修改
const handleEdit = (item) => {
	uni.navigateTo({
		url: `/mypage/usertabbar/createTemplate?sendType=set&&id=${item.id}`
	});
};
const handleRemove = (item) => {
	showConfirm('是否要删除当前模版?').then((res) => {
		if (res.confirm) {
			removeList({ id: item.id }).then((res) => {
				if (res.code == 200) {
					toast('已删除');
					data.queryParams.pageNum = 1; // 重置页码
					getList();
				}
			});
		}
	});
};
const switchChange = (item, e) => {
	item.online = e.detail.value ? '1' : '0';
	upTemplate({ id: item.id }).then((res) => {
		if (res.code == 200) {
			toast('已修改上架状态');
		}
	});
};
const loadMore = () => {
  if (data.isLoading || !data.hasMore) {
    return false;
  }
  
  data.queryParams.pageNum++;
  getList(true); // 传递 true 表示是加载更多
  
  return true;
};
defineExpose({
	loadMore
});
onMounted(() => {
	uni.$off('update');
	uni.$on('update', function (data) {
		console.log('监听到事件来自 update');
		getList();
	});
	getList();
});
</script>
<style lang="scss">
.right_icon {
	position: fixed;
	z-index: 9;
	right: 20rpx;
	bottom: 160rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	.icon {
		width: 100rpx;
		height: 100rpx;
		background: #d8c6a7;
		border-radius: 50rpx;
		border: 1px solid #75613e;
		text-align: center;
		image {
			width: 44rpx;
			height: 44rpx;
		}
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #75613e;
	}
}
.contents {
	.right_item {
		width: 710rpx;
		background: #ffffff;
		margin: 0rpx auto 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		.right_item_block {
			display: flex;
			flex: 1;
			image {
				display: block;
				width: 140rpx;
				height: 190rpx;
				border-radius: 8rpx;
			}
			.right_cont {
				flex: 1;
				margin-left: 12rpx;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				justify-content: space-between;
				width: 0;
				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.tip {
					margin: 10rpx 0rpx 0rpx 0rpx;
					.t1 {
						padding: 0rpx 6rpx;
						height: 32rpx;
						background: #b19561;
						border-radius: 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #ffffff;
						line-height: 32rpx;
						margin-right: 10rpx;
					}
					.t2 {
						padding: 0rpx 6rpx;
						height: 28rpx;
						border-radius: 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #615b56;
						line-height: 28rpx;
						border: 1px solid #615b56;
						margin-right: 10rpx;
					}
				}
				.user {
					margin-top: 10rpx;
					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
						border-radius: 12rpx;
					}
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #8f8f8b;
				}
				.tips {
					margin-top: 6rpx;
					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
						border-radius: 12rpx;
					}
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #8f8f8b;
					.ts {
						flex: 1;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
			.zt {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #8f8f8b;
			}
		}
		.tss {
			margin-top: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #892b1b;
		}
		.bottom {
			margin-top: 22rpx;
			padding-top: 20rpx;
			border-top: 1px solid #ededed;
			.text_flex {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #8c8c8c;
				position: relative;
			}
			.btn {
				width: 128rpx;
				height: 40rpx;
				border-radius: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #8f8f8b;
				line-height: 40rpx;
				text-align: center;
				border: 1px solid #d1d1d6;
				margin-left: 20rpx;
			}
		}
	}
}
.switch-wrapper {
	/* 调整开关整体容器的对齐方式（可选） */
	display: flex;
	/* uni-app文字类名 */
	font-size: 36rpx !important; /* 固定文字大小 */
	transform: none !important; /* 取消文字继承的缩放 */
	/* 深度选择器穿透原生组件样式 */
	::v-deep wx-switch, /* 微信小程序 */
	::v-deep uni-switch {
		/* 其他平台 */
		/* 缩小开关的整体尺寸（通过transform缩放） */
		transform: scale(0.6); /* 0.8表示缩小到80%，可根据需要调整 */
		transform-origin: left center; /* 缩放原点左对齐，避免文字偏移 */
		display: flex;
		align-items: center;
	}
}
</style>
